<template>
    <div>
        <a-select style="width: 200px;margin-bottom: 10px;" placeholder="点击选择工地查询" @change="handleChange">
            <a-select-option :value="item" v-for="(item,index) in buildingSites" :key="index">
                {{ item }}
            </a-select-option>
        </a-select>

        <a-button style="margin-left: 6px" type="primary" @click="addModalVisible=true">添加机械</a-button>

        <a-table style="background-color: white" bordered :columns="columns" :dataSource="points">
            <template slot="action" slot-scope="id">
                <a-button style="margin-right: 4px;" size="small" type="primary" @click="onUpdate(id)">修改</a-button>
                <a-button size="small" type="danger" @click="onDelete(id)">删除</a-button>
            </template>
        </a-table>
        <a-modal title="更新机械"
                 :visible="modalVisible"
                 @cancel="modalVisible=false"
                 @ok="handleUpdateSubmit">
            <a-form :form="form"
                    :label-col="{ span: 5 }"
                    :wrapper-col="{ span: 12 }"
                    @submit="handleUpdateSubmit">
                <a-form-item label="工地">
                    <a-select v-decorator="['gdname',{rules:[{required: true, message: '请选择工地'}]}]"
                              style="width: 200px" placeholder="点击选择工地">
                        <a-select-option v-for="(item,index) in buildingSites" :key="index" :value="item">
                            {{ item }}
                        </a-select-option>
                    </a-select>
                </a-form-item>
                <a-form-item label="环保码">
                    <a-input v-decorator="['hbm',{rules:[{required: true, message: '请输入环保码'}]}]"/>
                </a-form-item>

                <a-form-item label="经度">
                    <a-input v-decorator="['lon',{rules:[{required: true, message: '请输入经度'}]}]"
                             placeholder="请输入经度" type="number"/>
                </a-form-item>
                <a-form-item label="纬度">
                    <a-input v-decorator="['lau', {rules:[{required: true, message: '请输入纬度'}]}]"
                             placeholder="请输入纬度" type="number"/>
                </a-form-item>
                <a-form-item label="机械类型">
                    <a-select v-decorator="['jxlx',{rules:[{required: true, message: '请选择机械类型'}]}]">
                        <a-select-option v-for="(item, index) in machineTypes" :key="index">
                            {{ item }}
                        </a-select-option>
                    </a-select>
                </a-form-item>
                <a-form-item label="机械所有人">
                    <a-input v-decorator="['jxsyr',{rules:[{required: true, message: '请输入机械所有人'}]}]"/>
                </a-form-item>
                <a-form-item label="联系电话">
                    <a-input v-decorator="['phone',{rules:[{required: true, message: '请输入联系电话'}]}]"/>
                </a-form-item>
            </a-form>
        </a-modal>

        <a-modal title="添加机械"
                 :visible="addModalVisible"
                 @cancel="addModalVisible=false"
                 @ok="handleSubmit">
            <a-form :form="addForm"
                    :label-col="{ span: 5 }"
                    :wrapper-col="{ span: 12 }"
                    @submit="handleSubmit">
                <a-form-item label="工地">
                    <a-select v-decorator="['gdname',{rules:[{required: true, message: '请选择工地'}]}]"
                              style="width: 200px" placeholder="点击选择工地">
                        <a-select-option v-for="(item,index) in buildingSites" :key="index" :value="item">
                            {{ item }}
                        </a-select-option>
                    </a-select>
                </a-form-item>
                <a-form-item label="环保码">
                    <a-input v-decorator="['hbm',{rules:[{required: true, message: '请输入环保码'}]}]"/>
                </a-form-item>

                <a-form-item label="经度">
                    <a-input v-decorator="['lon',{rules:[{required: true, message: '请输入经度'}]}]"
                             placeholder="请输入经度" type="number"/>
                </a-form-item>
                <a-form-item label="纬度">
                    <a-input v-decorator="['lau', {rules:[{required: true, message: '请输入纬度'}]}]"
                             placeholder="请输入纬度" type="number"/>
                </a-form-item>
                <a-form-item label="机械类型">
                    <a-select v-decorator="['jxlx',{rules:[{required: true, message: '请选择机械类型'}]}]">
                        <a-select-option v-for="(item, index) in machineTypes" :key="index">
                            {{ item }}
                        </a-select-option>
                    </a-select>
                </a-form-item>
                <a-form-item label="机械所有人">
                    <a-input v-decorator="['jxsyr',{rules:[{required: true, message: '请输入机械所有人'}]}]"/>
                </a-form-item>
                <a-form-item label="联系电话">
                    <a-input v-decorator="['phone',{rules:[{required: true, message: '请输入联系电话'}]}]"/>
                </a-form-item>
            </a-form>
        </a-modal>
    </div>
</template>
<script>
import {METHOD, request} from "@/utils/request";
import {nextTick} from "vue";

const columns = [
    {
        title: '环保码',
        dataIndex: 'hbm',
        key: 'hbm',
    },
    {
        title: '机械所有人',
        dataIndex: 'jxsyr',
        key: 'jxsyr',
    },
    {
        title: '联系电话',
        key: 'phone',
        dataIndex: 'phone',
    },
    {
        title: '经度',
        dataIndex: 'lon',
        key: 'lon',
    },
    {
        title: '纬度',
        dataIndex: 'lau',
        key: 'lau',
    }, {
        title: '添加时间',
        dataIndex: 'addtime',
        key: 'addtime',
    }, {
        title: '操作',
        dataIndex: 'id',
        scopedSlots: {
            customRender: 'action'
        }
    }
];

export default {
    name: "list",
    data() {
        return {
            buildingSites: [],
            points: [],
            columns,
            modalVisible: false,
            addModalVisible: false,
            currentBuildingSite: '',
            form: this.$form.createForm(this, {name: 'dynamic_rule'}),
            addForm: this.$form.createForm(this, {name: 'dynamic_rule'}),
            machineTypes: [
                '挖掘机',
                '推土机'
            ]
        }
    },
    mounted() {
        this.userId = JSON.parse(localStorage.getItem(process.env.VUE_APP_USER_KEY)).id;
        this.getBuildingSites()
    },
    methods: {
        getBuildingSites() {
            request("/label/getgdlist", METHOD.GET, {
                userid: this.userId
            }).then(res => {
                console.log(res)
                this.buildingSites = res.data.data
            })
        },
        handleChange(buildingSite) {
            this.currentBuildingSite = buildingSite
            request("/label/getlabelByuid", METHOD.GET, {
                userid: this.userId,
                gdname: buildingSite
            }).then(res => {
                this.points = res.data.data
            })
        },
        onUpdate(id) {
            console.log(id);
            const point = this.points.find(item => {
                return item.id === id
            })
            this.modalVisible = true;
            nextTick(() => {
                this.form.setFieldsValue(point)
            })
        },
        onDelete(id) {
            request("/label/deleteAreasBY_id", METHOD.DELETE, {
                id
            }).then(res => {
                if (res.data.code === 1) {
                    this.$message.success("删除成功")
                    this.handleChange(this.currentBuildingSite)
                }
            })
        },
        handleUpdateSubmit(e) {
            e.preventDefault();
            this.form.validateFields((err, values) => {
                if (!err) {
                    // 验证 values.log 是正确的经度值
                    if (values.lon < -180 || values.lon > 180) {
                        this.$message.error("经度值错误")
                        return
                    }

                    if (values.lau < -90 || values.lau > 90) {
                        this.$message.error("纬度值错误")
                        return
                    }
                    request("/label/updatelabelByid", METHOD.PUT, {
                        ...values,
                        agent_id: this.userId
                    }).then(res => {
                        if (res.data.code === 1) {
                            this.$message.success("更新成功")
                            this.handleChange(this.currentBuildingSite)
                            this.modalVisible = false;
                        }
                    })
                }
            })
        },
        handleSubmit(e) {
            e.preventDefault();
            this.addForm.validateFields((err, values) => {
                console.log(values)
                if (!err) {

                    // 验证 values.log 是正确的经度值
                    if (values.lon < -180 || values.lon > 180) {
                        this.$message.error("经度值错误")
                        return
                    }

                    if (values.lau < -90 || values.lau > 90) {
                        this.$message.error("纬度值错误")
                        return
                    }

                    request("/label/addlabel", METHOD.POST, {
                        ...values,
                        agent_id: this.userId
                    }).then(res => {
                        if (res.data.code === 1) {
                            this.$message.success("添加成功")
                            this.addModalVisible = false
                        }
                    })
                }
            })
        }
    }
}
</script>


<style scoped lang="less">

</style>